<template>
  <div class="app-container" v-loading="loading">
    <el-tabs v-model="tabName" @tab-click="changeTab">
      <el-tab-pane v-for="(i, k) in tabList" :key="k" :label="i.label" :name="i.value" />
    </el-tabs>
    <h3>配置参数</h3>
    <el-form ref="form" :model="form" label-width="200px">
      <el-form-item
        v-for="(i, k) in Object.keys(form)"
        :key="k"
        :label="getEnum(i)"
        :prop="i"
      >
        <el-input
          v-model="form[i]"
          placeholder="请输入内容"
          :disabled="disabled"
          style="width: 90%"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="warning" v-if="disabled" @click="disabled = false">
          编 辑
        </el-button>
        <div v-else>
          <el-button type="primary" @click="submitForm" :loading="loading">
            保 存
          </el-button>
          <el-button type="info" plain @click="cancelForm"> 取 消 </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getWeiriyaSetting, updateWeiriyaSetting } from "@/api/weiriya/weiriyaSetting";

export default {
  name: "WeiriyaSetting",
  data() {
    return {
      loading: false, // 遮罩层
      tabList: [
        { label: "充电余额警戒线", value: "CHARGING_DEPOSIT_WARNING_LINE" },
        { label: "停车余额警戒线", value: "PARKING_DEPOSIT_WARNING_LINE" },
        { label: "退款", value: "REFUND_SETTING" },
        { label: "充电桩（10孔）", value: "TOM_ACCOUNT" },
        { label: "微信相关配置", value: "WECHAT" },
      ],
      tabName: "CHARGING_DEPOSIT_WARNING_LINE", // tab选中的值
      form: {}, // 表单参数
      disabled: true, // 是否可编辑
    };
  },
  created() {
    this.changeTab();
  },
  methods: {
    // tab切换
    changeTab() {
      this.loading = true;
      getWeiriyaSetting(this.tabName)
        .then((res) => {
          this.form = res.data.settingValue ? JSON.parse(res.data.settingValue) : {};
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取枚举值
    getEnum(val) {
      let list = [
        { label: "最低余额", value: "amount" },
        { label: "手机号码", value: "phoneNumber" },
        { label: "微信二维码", value: "weixinQRCodeUrl" },
        { label: "账号", value: "username" },
        { label: "密码", value: "password" },
        { label: "序列号", value: "serialNumber" },
        { label: "商户号", value: "mchId" },
        { label: "微信V3密钥", value: "apiKey3" },
      ];
      let item = list.find((i) => i.value == val);
      return item ? item.label : val;
    },
    // 取消
    cancelForm() {
      this.disabled = true;
      this.changeTab();
    },
    // 提交按钮
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = {
            id: this.tabName,
            settingValue: JSON.stringify(this.form),
          };
          updateWeiriyaSetting(data).then((res) => {
            this.$modal.msgSuccess("修改成功");
            this.disabled = true;
            this.changeTab();
          });
        }
      });
    },
  },
};
</script>
